<template>
	<el-dialog v-model="_d.visible" draggable :close-on-click-modal="false" width="600px">
		<template #header>
			<div style="color: #fff">添加阶段</div>
		</template>
	  <el-form class="form-box" :model="_d.form" ref="formRef" label-width="auto">
			<el-form-item label="阶段名称" prop="phaseName" :rules="[{ required: true, message: '阶段名称不能为空', trigger: 'blur' }]">
				<el-input v-model="_d.form.phaseName" placeholder="请输入阶段名称" clearable />
			</el-form-item>
			<el-form-item label="序号" prop="orderId">
				<el-input-number v-model="_d.form.orderId" :min="1" controls-position="right" />
			</el-form-item>
			<el-form-item label="阶段描述" prop="description">
				<el-input v-model="_d.form.description" type="textarea" rows="5" placeholder="请输入阶段描述" clearable />
			</el-form-item>
			<el-form-item label="表单模板" prop="formTemplateIds">
				<el-select popper-class="process-form-list-popper" v-model="_d.form.formTemplateIds" multiple placeholder="请选择" style="width: 100%" clearable>
    			<el-option v-for="item in _d.templateList" :key="item.id" :label="item.formName" :value="item.id">
    				<div>{{item.formName}}</div>
    				<div v-if="item.description" class="bz">备注：{{item.description}}</div>
    			</el-option>
    		</el-select>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="cancel">关 闭</el-button>
				<el-button :loading="_d.btnLoading" type="primary" @click="save">确 认</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, onMounted } from 'vue';
import { ElNotification } from 'element-plus';
import {$get, $post, $postparams} from '/@/utils/request';

const emits = defineEmits(['reload']);
const formRef = ref();

const _d = reactive({
	visible: false,
	btnLoading: false,

	id: '',
	detail: null,

	form: {
		phaseName: '',
		description: '',
		orderId: 1,
		formTemplateIds: [],
	},

	templateList: [],
});

onMounted(async () => {
	
});

// 打开弹窗
const open = (id, detail) => {
	_d.id = id;
	_d.detail = detail || null;
	if(!detail) {
		_d.form.phaseName = '';
		_d.form.description = '';
		_d.form.orderId = 1;
		_d.form.formTemplateIds = [];
	} else {
		_d.form.phaseName = detail.phaseName;
		_d.form.description = detail.description;
		_d.form.orderId = detail.orderId;
		_d.form.formTemplateIds = detail.formTemplates.map(item => item.id);
	}

	_d.visible = true;

	getTemplateList();
};

// 获取模板列表
const getTemplateList = async () => {
	let params = {
		input: 0
	}
	var res = await $get('/projectTemplateModule/getformtemplate', params);
	_d.templateList = res.result || [];
}

// 取消
const cancel = () => {
	_d.visible = false;
};

// 保存
const save = () => {
	formRef.value.validate(async (valid) => {
		if (!valid) return;
		if(!_d.detail) {
			addData();
		} else {
			editData();
		}
	})
}

// 添加
const addData = () => {
	let params = {
		phaseTemplate: {
			projectTemplateId: _d.id,
			phaseName: _d.form.phaseName,
			description: _d.form.description,
			orderId: _d.form.orderId,
		},
		formTemplateIds: _d.form.formTemplateIds
	}
	_d.btnLoading = true;
	$post('/projectTemplateModule/addphasetemplate', params).then(res => {
		if(res.code == 200) {
			ElNotification({
		    title: '提示',
		    message: '添加成功',
		    type: 'success',
		  })
			emits('reload', _d.id);
			_d.visible = false;
		}
	}).finally(() => {
		_d.btnLoading = false;
	})
}

// 编辑
const editData = () => {
	let params = {
		phaseTemplate: {
			id: _d.detail.id,
			projectTemplateId: _d.id,
			phaseName: _d.form.phaseName,
			description: _d.form.description,
			orderId: _d.form.orderId,
		},
		formTemplateIds: _d.form.formTemplateIds
	}
	_d.btnLoading = true;
	$post('/projectTemplateModule/modifyphasetemplate', params).then(res => {
		if(res.code == 200) {
			ElNotification({
		    title: '提示',
		    message: '编辑成功',
		    type: 'success',
		  })
			emits('reload', _d.id);
			_d.visible = false;
		}
	}).finally(() => {
		_d.btnLoading = false;
	})
}

// 导出对象
defineExpose({ open });

</script>
<style lang="scss" scoped>
.form-box {
	min-height: 350px;
}
</style>
<style lang="scss">
.process-form-list-popper {
	.el-select-dropdown__item {
		min-height: 34px;
		.bz {
			margin-top: -4px;
			padding-bottom: 3px;
			font-size: 12px;
			color: #aaa;
			line-height: 20px;
		}
	}
}	
</style>
